<template>
  <div class="page-miH page-bgBack">
    <rTitle :type="'back'" :tit="'人才详情'" />
    <a-tabs style="padding: 24px">
      <a-tab-pane key="baseinfo" tab="基本信息">
        <div class="r-add-box">
          <a-row type="flex">
            <a-col :span="13" class="col-left">
              <a-row>
                <a-col :span="12">
                  <a-avatar v-if="avatar" class="title-s-avatar" :src="avatar" />
                  <a-avatar v-if="!avatar && gender === '男'" :src="n1" class="title-s-avatar" />
                  <a-avatar v-if="!avatar && gender === '女'" :src="n2" class="title-s-avatar" />
                  <span class="title-s-name">{{ name }}</span>
                  <span class="title-s-j" style="width: 72px" v-if="principalType === 'broker'">经纪人人脉</span>
                  <span class="title-s-n" v-if="principalType === 'emp'">内推</span>
                  <span v-if="principalType === 'broker'">来自经纪人</span>
                  <span style="color: #6a66f6" v-if="principalType === 'broker'">{{ $route.query.principalName }}</span>
                  <span v-if="principalType === 'emp'">来自内推人</span>
                  <span style="color: #32ccaa" v-if="principalType === 'emp'">{{ $route.query.principalName }}</span>
                </a-col>
                <a-col :span="12" style="text-align: right">
                  <a-button class="peopleBoxConCZ" style="margin-left: 8px" type="link" icon="form" @click="onEdit">编辑</a-button>
                </a-col>
              </a-row>
              <ResumeDetails :status="statusLook" :info="{ talentPoolId: $route.query.talentPoolId }"></ResumeDetails>
            </a-col>
            <a-col :span="11" class="col-right">
              <a-button type="primary" icon="plus" v-if="!deliverRecordId" @click="onPosition(true)">添加职位</a-button>
              <div v-else>
                <div class="drawer-msg">
                  <actionPoint class="swap-btn">
                    <template slot="actionPointBtn">
                      <a-button icon="swap"></a-button>
                    </template>

                    <li v-for="(item, index) in posArr" :key="index" @click="onPos(item)">
                      <div class="swap-btn-title">
                        <a-tooltip placement="top">
                          <template slot="title" v-if="item.postName">
                            <span>{{ item.postName }}</span>
                          </template>
                          <span class="overflowsQH">{{ item.postName }}</span>
                        </a-tooltip>

                        <span v-if="item.status == 1">已投递</span>
                        <span v-if="item.status == 2">已约面</span>
                        <span v-if="item.status == 3">待入职</span>
                        <span v-if="item.status == 4">已招聘</span>
                        <span v-if="item.status >= 5">未通过</span>
                      </div>

                      <div class="swap-btn-time">{{ moment(item.gmtCreate).format("YYYY-MM-DD") }}</div>
                    </li>
                  </actionPoint>

                  <div>
                    <a-tooltip placement="top">
                      <template slot="title" v-if="postName">
                        <span>{{ postName }}</span>
                      </template>
                      <div class="overflows">{{ postName }}</div> </a-tooltip
                    >>
                    <p v-if="companyUnitsStatus === 1">已投递</p>
                    <p v-if="companyUnitsStatus === 2">已约面</p>
                    <p v-if="companyUnitsStatus === 3">待入职</p>
                    <p v-if="companyUnitsStatus === 4">已招聘</p>
                    <p v-if="companyUnitsStatus >= 5">未通过</p>
                  </div>
                  <div class="desc">
                    <a-tooltip placement="bottom">
                      <template slot="title" v-if="companyUnitName">
                        <span>{{ companyUnitName }}</span>
                      </template>
                      <div class="desc-font">{{ companyUnitName }}</div>
                    </a-tooltip>
                    /
                    {{ cityName ? cityName.split(",")[1].split("/").join("-") : "" }}
                    /
                    {{ activeDelivery === 1 ? "投递人主动投递" : "投递人非主动投递" }}
                    /
                    {{ moment(deliverDays).format("YYYY-MM-DD HH:mm:ss") }}
                  </div>
                </div>
                <div>
                  <a-button type="primary" v-if="companyUnitsStatus === 1" @click="interviewVisible = true" style="margin-right: 12px"
                    >安排面试</a-button
                  >
                  <a-button
                    type="danger"
                    ghost
                    v-if="companyUnitsStatus == 1 || companyUnitsStatus == 2 || companyUnitsStatus == 3 || companyUnitsStatus == 4"
                    @click="onDelete"
                    style="margin-right: 12px"
                    >不合适</a-button
                  >
                  <a-button @click="phaseVisible = true" style="margin-right: 12px">转移阶段</a-button>
                  <a-button @click="onPosition(false)">添加职位</a-button>
                </div>
              </div>
              <fTitle :tit="'员工路径'" />
              <div v-if="timelineArr.length === 0" style="text-align: center">
                <img class="noJobimg" src="../../../../assets/noJobimg.png" alt="" />
                <div class="noJobimgText">暂无员工路径</div>
              </div>
              <div class="timeline">
                <a-timeline>
                  <a-timeline-item v-for="item in timelineArr" :key="item.id">
                    <div class="l-item">
                      <div>
                        <div class="time">{{ item.gmtCreate ? moment(item.gmtCreate).format("YYYY-MM-DD HH:mm:ss") : "" }}</div>
                        <div class="content">{{ item.record }}</div>
                      </div>
                      <div class="btn">
                        <a-button
                          v-if="item.deliverRecordStatus === 2"
                          type="link"
                          @click="
                            interviewId = item.interviewId;
                            interviewMsgVisible = true;
                          "
                          >面试详情</a-button
                        >
                      </div>
                    </div>
                  </a-timeline-item>
                </a-timeline>
              </div>
            </a-col>
          </a-row>
          <Position
            :visible.sync="positionVisible"
            :type="positionType"
            :id="recruitInfoId"
            :statusP="companyUnitsStatus"
            :deliverRecordId="deliverRecordId"
            :talentPoolId="$route.query.talentPoolId"
            @upDate="upDate"
          />
          <phase :visible.sync="phaseVisible" @upDate="upDatePhase" />
          <interview
            :visible.sync="interviewVisible"
            :deliverRecordId="deliverRecordId"
            :talentPoolId="$route.query.talentPoolId"
            :mjson="mjson"
            :info="info"
            :positionValue="positionValue"
            :positionType="positionType"
            @onShare="onShare"
            @onShareDeliverRecordId="onShareDeliverRecordId"
          />
          <interviewMsg
            :visible.sync="interviewMsgVisible"
            :deliverRecordId="deliverRecordId"
            :interviewId="interviewId"
            :info="info"
            @onCloseInterview="onCloseInterview"
            @onEvaluate="onEvaluate"
          />
          <share :visible.sync="shareVisible" :qrCodeUrlV="qrCodeUrlV" />
          <evaluate
            :visible.sync="evaluateVisible"
            :evaluateId="evaluateId"
            :recruitInfoId="recruitInfoId"
            :companyUnitsId="companyUnitsId"
            @upDate="upDateEvaluate"
          />
        </div>
      </a-tab-pane>
      <a-tab-pane key="records" tab="跟进记录">
        <Records />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import moment from "moment";
import {
  getJobSeekers2,
  getOperationJobSeekerRecords,
  getInfoById,
  putDeliverRecords,
  putJobSeekers,
  getRecruitNameByJobSeekerId,
  getListByParentId0,
  getListByParentId1
} from "./api";
import rTitle from "../../component/rTitle";
import fTitle from "../../component/fTitle";
import share from "../../component/share";
import Position from "./component/position";
import phase from "./component/phase";
import interview from "./component/interview";
import interviewMsg from "./component/interviewMsg";
import actionPoint from "./component/actionPoint";
import evaluate from "../../people/component/evaluate";
import ResumeDetails from "./component/showResume/resumeDetails";
import Records from "./records.vue";
export default {
  components: {
    Records,
    rTitle,
    ResumeDetails,
    fTitle,
    Position,
    phase,
    interview,
    interviewMsg,
    share,
    actionPoint,
    evaluate
  },
  data() {
    return {
      statusLook: "look",
      positionType: "add",
      phoneImg: require("@/assets/img/phoneImg.png"),
      addressImg: require("@/assets/img/addressImg.png"),
      positionVisible: false,
      intentionJob: "",
      workExperience: "",
      phaseVisible: false,
      interviewVisible: false,
      interviewMsgVisible: false,
      shareVisible: false,
      evaluateVisible: false,
      evaluateId: "",
      name: "",
      address: "",
      principalType: "",
      principalName: "",
      avatar: "",
      gender: "",
      birthday: "",
      createUserName: "",
      phone: "",
      skill: "",
      remark: "",
      src: "",
      afterConversionAnnex: "",
      status: 1,
      qrCodeUrlV: "",
      companyUnitsId: null,
      companyUnitsStatus: 1,
      postName: "",
      companyUnitName: "",
      cityName: "",
      activeDelivery: "",
      deliverDays: "",
      mjson: {},
      interviewId: "",
      info: {},
      recruitInfoId: "",
      timelineArr: [],
      deliverRecordId: "",
      n1: require("@/assets/recruitment/n.png"),
      n2: require("@/assets/recruitment/n2.png"),
      tabsKey: "1",
      posArr: [],
      recruitInfoIdPos: "",
      positionValue: null,
      addressCode: "",
      addressShow: null
    };
  },
  created() {
    this.onGetJobSeekers();
    this.deliverRecordId = this.$route.query.deliverRecordId;
    this.onGetInfoById();

    this.onGetRecruitNameByJobSeekerId();
  },
  mounted() {
    if (this.$route.query.mode === "onekey") {
      if (this.$route.query.intentionJob) {
        this.recruitInfoId = this.$route.query.intentionJob;
      }
      this.onPosition(true);
    }
  },
  methods: {
    moment,
    async onGetRecruitNameByJobSeekerId() {
      try {
        if (this.$route.query.talentPoolId) {
          const { data } = await getRecruitNameByJobSeekerId(this.$route.query.talentPoolId);
          this.posArr = data;
        }
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetJobSeekers() {
      try {
        if (this.$route.query.talentPoolId) {
          const { data } = await getJobSeekers2(this.$route.query.talentPoolId);
          this.name = data.customTemplateMap.name;
          this.avatar = data.customTemplateMap.avatar;
          this.gender = data.customTemplateMap.sex;
          this.createUserName = data.createUserName;
          this.phone = data.customTemplateMap.phone;
          await this.getAddressCode(data.customTemplateMap.addressCode, data.customTemplateMap);
          this.skill = data.customTemplateMap.skill ? data.customTemplateMap.skill.split(",") : "";
          this.remark = data.customTemplateMap.remark;
          this.workExperience = data.customTemplateMap.workExperience;
          this.intentionJob =
            data.customTemplateMap.intentionJob && data.customTemplateMap.intentionJob.length
              ? data.customTemplateMap.intentionJob.split("*")[data.customTemplateMap.intentionJob.split("*").length - 1]
              : "";
          this.src = data.customTemplateMap.annex;
          this.principalType = data.customTemplateMap.principalType;
          this.birthday = data.customTemplateMap.birthday;
          this.info = {
            name: data.customTemplateMap.name,
            address: data.customTemplateMap.address,
            avatar: data.customTemplateMap.avatar,
            gender: data.customTemplateMap.gender,
            phone: data.customTemplateMap.phone
          };

          this.addressShow = `${data.customTemplateMap.address ? data.customTemplateMap.address : "暂无地址"}`;
        }
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async getAddressCode(val, customTemplateMap) {
      if (val) {
        const arr = val.split(",");
        let city = "";
        let city1 = "";
        if (arr.length === 2) {
          getListByParentId0().then((res) => {
            city = res.data.find((z) => z.id === Number(arr[0])).name;
            getListByParentId1(Number(arr[0])).then((ress) => {
              city1 = ress.data.find((z) => z.id === Number(arr[1])).name;
              this.addressCode = `${city},${city1}`;
              this.address = `${this.addressCode ? this.addressCode : "暂无工作城市"}${
                !customTemplateMap.workYears ? "" : ` | ${customTemplateMap.workYears}年工作经验`
              } | 创建来源：${this.createUserName}`;
            });
          });
        } else {
          getListByParentId0().then((res) => {
            city = res.data.find((z) => z.id === Number(arr[0])).name;
            this.addressCode = `${city}`;
            this.address = `${this.addressCode ? this.addressCode : "暂无工作城市"}${
              !customTemplateMap.workYears ? "" : ` | ${customTemplateMap.workYears}年工作经验`
            } | 创建来源：${this.createUserName}`;
          });
        }
      } else {
        this.addressCode = "";
        this.address = `${this.addressCode ? this.addressCode : "暂无工作城市"}${
          !customTemplateMap.workYears ? "" : ` | ${customTemplateMap.workYears}年工作经验`
        } | 创建来源：${this.createUserName}`;
      }
    },
    async onGetInfoById() {
      try {
        if (this.deliverRecordId) {
          const { data } = await getInfoById(this.deliverRecordId);
          this.companyUnitsId = data.companyUnitsId;
          this.companyUnitsStatus = data.status;
          this.postName = data.postName;
          this.companyUnitName = data.companyUnitName;
          this.cityName = data.brokerAddress;
          this.activeDelivery = data.activeDelivery;
          // this.deliverDays = data.deliverDays;
          this.deliverDays = data.gmtCreate;
          this.mjson = {
            talentPoolId: data.talentPoolId,
            companyUnitsName: data.companyUnitName,
            recruitInfoName: data.postName,
            companyUnitsId: data.companyUnitsId,
            recruitInfoId: data.recruitInfoId
          };
          this.interviewId = data.interviewId;
          this.recruitInfoId = data.recruitInfoId;

          this.onGetOperationJobSeekerRecords();
        }
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetOperationJobSeekerRecords() {
      try {
        const { data } = await getOperationJobSeekerRecords({
          talentPoolId: this.$route.query.talentPoolId,
          pageNo: 1,
          pageSize: 1000,
          recruitInfoId: this.recruitInfoId || null,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.timelineArr = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },

    async onPutDeliverRecords(status) {
      try {
        await putDeliverRecords({
          companyUnitsId: this.companyUnitsId,
          status,
          id: this.deliverRecordId
        });
        this.$notification.success({ message: "操作成功" });
        this.onGetJobSeekers();
        this.onGetInfoById();
        this.onGetRecruitNameByJobSeekerId();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onSumbitAnnex() {
      try {
        await putJobSeekers({
          id: this.$route.query.talentPoolId,
          phone: this.phone,
          name: this.name,
          annex: this.src || "",
          afterConversionAnnex: this.afterConversionAnnex || ""
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onDelete() {
      this.onPutDeliverRecords(5);
    },
    upDatePhase(e) {
      if (e === "2") {
        this.interviewVisible = true;
      } else {
        this.onPutDeliverRecords(e);
      }
    },
    upDate(status, deliverRecordId, positionValue) {
      if (status === 2) {
        this.interviewVisible = true;
        this.positionValue = positionValue;
      } else {
        this.deliverRecordId = deliverRecordId;
        this.positionValue = null;
        this.onGetJobSeekers();
        this.onGetInfoById();
        this.onGetRecruitNameByJobSeekerId();
      }
    },
    onShare(e) {
      this.qrCodeUrlV = e.qrCodeUrl;
      this.shareVisible = true;
      this.interviewVisible = false;
      this.positionVisible = false;
      this.onGetJobSeekers();
      this.onGetInfoById();
      this.onGetRecruitNameByJobSeekerId();
    },
    onShareDeliverRecordId(e) {
      this.deliverRecordId = e;
      this.positionValue = null;
    },
    onPosition(e) {
      this.positionVisible = true;
      if (e) {
        this.positionType = "add";
      } else {
        this.positionType = "edit";
      }
    },
    upDataSrc(e) {
      this.src = e.transformationFrontUrl;
      this.afterConversionAnnex = e.transformationResultUrl || e.transformationFrontUrl;
      this.onSumbitAnnex();
    },
    onEdit() {
      this.$router.push({
        name: "talentEdit",
        query: { talentPoolId: this.$route.query.talentPoolId, deliverRecordId: this.deliverRecordId }
      });
    },
    onPos(e) {
      this.recruitInfoId = e.recruitInfoId;
      this.mjson.recruitInfoId = e.recruitInfoId;
      this.deliverRecordId = e.deliverRecordId;
      this.onGetInfoById();
    },
    onCloseInterview() {
      this.onPutDeliverRecords(9, this.deliverRecordId, this.companyUnitsId);
    },
    onEvaluate(e) {
      this.evaluateId = e;
      this.evaluateVisible = true;
    },
    upDateEvaluate() {
      this.$notification.success({ message: "操作成功" });
      this.onGetJobSeekers();
      this.onGetInfoById();
      this.onGetRecruitNameByJobSeekerId();
    }
  }
};
</script>

<style lang="scss" scoped>
.noJobimg {
  width: 80px;
  height: 80px;
  margin-top: 41px;
}
.noJobimgText {
  color: #767885;
  font-size: 14px;
  padding-top: 23px;
}
.fTitle-box {
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  margin: 20px 0 24px 0;
  .fTitle-desc {
    font-size: 10px;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #a6a8b4;
  }
}
.title-s-j {
  display: inline-block;
  width: 46px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid #4686ff;
  color: #4686ff;
  font-size: 10px;
  margin: 0 10px;
}
.title-s-name {
  color: #3c3d43;
  font-size: 18px;
  width: 47%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
}

.title-s-n {
  display: inline-block;
  width: 36px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid #32ccaa;
  color: #32ccaa;
  font-size: 10px;
  margin: 0 10px;
}
.title-s-avatar {
  width: 42px;
  height: 42px;
}
.peopleBoxConCZ {
  width: 72px;
  height: 32px;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.r-add-box {
  padding: 24px;
  ::v-deep .ant-tabs-bar {
    border: 0;
  }
  ::v-deep .ant-tabs-tab {
    padding: 8px 0;
    margin-right: 24px;
  }
  .col-left {
    padding-right: 24px;
    height: 100%;
    border-right: 4px solid #f4f6fa;
    .drawer-name {
      display: flex;
      justify-content: space-between;
      height: 80px;
      color: #767885;
    }
  }
  .col-right {
    padding-left: 24px;
  }
  .drawer-msg {
    width: 100%;
    height: 88px;
    background: #f4f6fa;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    padding: 16px 16px 24px 16px;
    box-sizing: border-box;
    margin-bottom: 20px;
    position: relative;
    .swap-btn {
      position: absolute;
      top: 28px;
      right: 24px;
    }
    p {
      display: inline-block;
      padding: 4px 6px;
      font-size: 12px;
      color: #d48806;
      background: #fff1b8;
      border-radius: 9px;
    }
    .desc {
      font-size: 14px;
      color: #767885;
      display: flex;
      .desc-font {
        display: inline-block;
        max-width: 24%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .drawer-row {
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
    color: #767885;
    display: flex;
    .label {
      width: 80px;
    }
    .content {
      width: 88%;
    }
  }
  .l-item {
    min-height: 70px;
    padding: 16px 30px 16px 24px;
    background: #f4f6fa;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .time {
      color: #a6a8b4;
      margin-bottom: 12px;
    }
    .content {
      font-size: 14px;
    }
    .btn {
      line-height: 56px;
    }
  }

  .timeline {
    max-height: 700px;
    overflow-y: auto;
  }
  .overflows {
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
  }
}
</style>
